/* banner */
.banner{margin-top: 100px;overflow-x: hidden;}
.banner img{width: 100%;}

.banner .swiper-slide{overflow: hidden;}
.banner .slide-inner{position: absolute;width: 100%;height: 100%;left: 0;top: 0;background-size: cover;background-position: center;display: -webkit-box;display: -ms-flexbox;display: -webkit-flex;display: flex;-webkit-box-pack: center;-ms-flex-pack: center;-webkit-justify-content: center;justify-content: center;-webkit-box-align: center;-ms-flex-align: center;-webkit-align-items: center;align-items: center;color:#fff;}
.banner .hb img,.banner .mb img{opacity: 0;}
.banner .mb{display: none;}

.banner .swiper-pagination-bullet{transition: all 0.3s;}
.banner .swiper-pagination-bullet-active{width: 24px;background-color: #fff;border-radius: 4px;}


/* about */
.about.area{padding: 0;}
.about{background-color: #f5f5f5;position: relative;background-size: 1920px auto;background-position: center top;background-repeat: no-repeat;color: #fff;padding-bottom: 5%!important;}
.about .c-tit{padding: 5% 0;text-align: center;color: #333;}
.about .a-con{background-color: #008ddb;overflow: hidden;height: 530px;}
.about .row{height: 100%;position: relative;}
.about .a-l{height: 100%;}
.about .a-l img{width: 100%;height: 100%;object-fit: cover;}
.about .a-r{}
.about .a-r .c-tit{font-size: 28px;text-align: left;text-transform: uppercase;position: relative;color: #fff;}
.about .a-r .c-tit::before{content: '';display: inline-block;width: 150px;height: 6px;background-color: #fff;bottom:15%;left: 0;position: absolute;}
.about .a-r .c-tit span{font-weight: normal;}
.about .a-r .info{font-size: 16px;line-height: 35px;overflow: hidden;display: -webkit-box;-webkit-line-clamp: 6;-webkit-box-orient: vertical;padding-right: 5%;}
.about .a-r a{display: inline-block;padding: 0 5%;line-height: 38px;height: 38px;border: 1px solid #fff;border-radius: 19px;color: #fff;text-align: center;margin-top: 5%;}
.about .a-tel{position: absolute;right: 0;bottom: 0;background-color: #fff;width: 40%;max-width: 460px;border-top-left-radius: 40px;}
.about .a-tel .l{float: left;width: 100%;color: #008ddb;padding-right: 100px;position: relative;}
.about .a-tel .l p{font-size: 20px;text-align: right;}
.about .a-tel .l h3{text-align: right;font-size: 40px;font-weight: bold;}
.about .a-tel .l::after{content: '';display: inline-block;width: 100px;height: 100%;position: absolute;right: 0;background-image: url(../images/h-tel.png);background-size: auto;background-repeat: no-repeat;background-position: center;top: 0;}

/* Pro */
.product{margin: 5% 0;}
.product .c-tit{margin-bottom: 10%;}
.product .p-nav a{display: block;width: 100%;height: 42px;line-height: 42px;border-top-left-radius: 21px;border-bottom-left-radius: 21px;background-color: #e7ebf2;margin-bottom: 8.3%;font-size: 16px;color: #0a0b29;text-indent: 30px;transition: all 0.3s;}
.product .p-nav a:last-child{margin-bottom: 0;}
.product .p-nav a:hover{background-color: #008ddb;color: #fff;}


.product .pro-li{width: 100%;position: relative;padding-right: 33.333333%;}
.product .pro-li .img{position: relative;width: 100%;overflow: hidden;padding-top: 71%;}
.product .pro-li .img img{position: absolute;width: 100%;height: 100%;object-fit: cover;left: 50%;top: 50%;transform: translate(-50%,-50%);border-radius: 8px;}
.product .pro-li .info{position: absolute;width: 40%;right: 0;top: 50%;transform: translateY(-50%);background-color: #008ddb;border-radius: 8px;color: #fff;padding: 3%;}
.product .pro-li .info h3{font-size: 22px;font-weight: bold;margin-bottom: 4%;}
.product .pro-li .info p{font-size: 14px;line-height: 34px;overflow: hidden;display: -webkit-box;-webkit-line-clamp: 3;-webkit-box-orient: vertical;}
.product .pro-li .info a{display: inline-block;padding: 0 10%;line-height: 36px;height: 36px;font-size: 14px;text-align: center;border-radius: 18px;background-color: #fff;margin-top: 10%;}
.product #proSwiper{overflow: hidden;}

.product #proSwiper2{overflow: hidden;margin-top: 3%;}
.product #proSwiper2 .swiper-slide{position: relative;border-radius: 8px;overflow: hidden;}
.product #proSwiper2 .swiper-slide .img2{position: relative;padding-top: 90%;}
.product #proSwiper2 .swiper-slide .img2 img{position: absolute;width: 100%;height: 100%;object-fit: cover;left: 50%;top: 50%;transform: translate(-50%,-50%);border-radius: 8px;}
.product #proSwiper2 .swiper-slide .info2{position: absolute;height: 70%;background-color: #008ddb;left: 0;bottom: 0;width: 100%;transform: translateY(calc(100% - 65px));transition: all 0.5s;}
.product #proSwiper2 .swiper-slide .info2 .por{width: 100%;height: 100%;}
.product #proSwiper2 .swiper-slide .info2 .por::before{content: '';display: inline-block;width: 100%;height: 25px;background-image: url(../images/plang.png);background-size: cover;background-position: center bottom;background-repeat: no-repeat;position: absolute;top: -24px;}
.product #proSwiper2 .swiper-slide .info2 .poa{top:0;left: 50%;width: 100%;transform: translateX(-50%);text-align: center;transition: all 0.5s;}
.product #proSwiper2 .swiper-slide .info2 .poa p{font-size: 20px;font-weight: bold;color: #fff;line-height: 65px;height: 65px;text-align: center;margin-bottom: 5%;}
.product #proSwiper2 .swiper-slide .info2 .poa a{display: inline-block;height: 36px;line-height: 36px;width: 80%;max-width: 180px;background-color: #fff;border-radius: 18px;color: #2c67eb;text-align: center;}
.product #proSwiper2 .swiper-slide .info2:hover{transform: translateY(0);}
.product #proSwiper2 .swiper-slide .info2:hover .poa{top: 50%;transform: translateX(-50%) translateY(-55%);}

.product .swiper-switch{position: absolute;right: 0;bottom: 0;width: 40%;z-index: 5;padding-right: 15px;}
.product .swiper-switch .swiper-button-next,.product .swiper-switch .swiper-button-prev{position: relative;width: 50px;height: 34px;border: 1px solid #0a0b29;float: right;left: auto;right: auto;margin-left: 5%;transition: all 0.3s;}
.product .swiper-switch .swiper-button-next::after,.product .swiper-switch .swiper-button-prev::after{display: inline-block;width: 100%;position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);color: #0a0b29;font-size: 30px;text-align: center;font-family: fangsong;transition: all 0.3s;}
.product .swiper-switch .swiper-button-next::after{content: '→';}
.product .swiper-switch .swiper-button-prev::after{content: '←';}
.product .swiper-switch div:hover{background-color: #008ddb;color: #fff;border: 1px solid #008ddb;}
.product .swiper-switch div:hover::after{color: #fff;}

/* case */
.case{background-size: 100%;background-position: center bottom;background-repeat: no-repeat;margin-bottom: 3%;}
.case .c-tit{text-align: center;margin: 5% 0 4%;}
.case #caseSwiper{overflow: hidden;position: relative;}
.case .li{position: relative;border-radius: 10px;overflow: hidden;cursor: pointer;}
.case .li .img{position: relative;width: 100%;padding-top: 80%;overflow: hidden;}
.case .li .img::before{content: '';position: absolute;display: inline-block;width: 100%;height: 100%;top: 0;left: 0;background-color: rgba(0,0,0,0.5);z-index: 2;transition: all 0.3s;}
.case .li .img img{width: 100%;height: 100%;left: 50%;top: 50%;transform: translate(-50%,-50%);object-fit: cover;position: absolute;z-index: 1;transition: all 0.3s;}
.case .li .info{position: absolute;bottom: 0;width: 100%;z-index: 3;}
.case .li .info h3{height: 60px;line-height: 60px;text-align: center;background-color: rgba(0,141,219,1);font-size: 16px;text-align: center;}
.case .li .info h3 p{display: inline-block;width: 100%;overflow: hidden;display: -webkit-box;-webkit-line-clamp: 1;-webkit-box-orient: vertical;color: #fff;position: relative;}
.case .li .info h3::before{content: '';position: absolute;width: 100%;height: 20px;background-image: url(../images/plang2.png);background-repeat: no-repeat;background-size: 105% auto;background-position: center bottom;left: 0;top: -19px;}
.case .swiper-slide a{padding: 5% 0;display: inline-block;width: 100%;height: 100%;}
.case .swiper-slide-next a{padding: 0;}
.case .swiper-slide-next a .li .img::before{background-color: rgba(0,0,0,0);}
.case .swiper-slide-next .img{padding-top: 90%;}
.case .swiper-slide:hover a .li .img::before{background-color: rgba(0,0,0,0);}
.case .swiper-slide:hover a .li .img img{width: 110%;}
.case .swiper-button-prev,.case .swiper-button-next{width: 35px;height: 35px;border-radius: 50%;border: 2px solid #fff;}
.case .swiper-button-prev::after,.case .swiper-button-next::after{color: #fff;font-size: 16px;width: 100%;height: 100%;display: inline-block;text-align: center;line-height: 32px;font-weight: bold;}

/* news */
.news{background-color: #f4f5f8;overflow: hidden;}
.news .c-tit{text-align: center;padding: 5% 0;}
.news ul li{margin-bottom: 15px;}
.news ul li .li-d{float: left;position: relative;z-index: 1;width: 100%;}
.news ul li .li-d a .time{width: 60px;float: left;height: 100%;padding-top: 15px;}
.news ul li .li-d a .time b{font-size: 45px;float: left;border-bottom: 1px solid #000;}
.news ul li .li-d a .info{float: left;width: calc(100% - 60px);padding-top: 30px;padding-left: 4%;}

.news ul li a{display: block;float: left;color: #222;background-color: #e9ecf2;padding: 0 6%;position: relative;width: 100%;height: 130px;z-index: 3;overflow: hidden;z-index: 1;border-radius: 8px;transition: all 0.3s;}
.news ul li a h4{font-size: 22px;transition: all 0.3s;display: inline-block;margin: 0;width: 100%;margin-bottom: 10px;overflow: hidden;display: -webkit-box;-webkit-line-clamp: 1;-webkit-box-orient: vertical;transition: all 0.4s;}
.news ul li a p{overflow: hidden;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;font-size: 14px;opacity: 0.6;transition: all 0.3s;}
.news ul li a span{font-size: 14px;opacity: 0.6;margin: 7% 0 0;display: block;z-index: 1;float: left;}
.news ul li a div{position: relative;z-index: 2;}
.news ul li a div .f-info{float: left;width: 100%;padding: 0 10%;margin-top: 30px;}
.news ul li:first-child a{height: 420px;padding: 0 0%;background-color: #008ddb;color: #fff;border-radius: 8px;}
.news ul li:first-child .li-d1{width: 100%;}
.news ul li:first-child a img{height: 240px;width: 100%;object-fit: cover;margin: 0px 0;}

.news ul li a::before{content: '';width: 0;height: 0;transition: all 0.6s;position: absolute;top: -50%;left: -50%;border-radius: 50%;z-index: 2;background-color: #008ddb;}


.news ul li:hover a{color: #008ddb;border-radius: 5px;background-color: #fff;}
.news ul li:hover .li-d a .time b{border-bottom: 1px solid #008ddb;}
/* .news ul li:hover a::before{width: 200%;height: 200%;} */


@media screen and (min-width: 0px) and (max-width:1250px){
}
@media screen and (min-width: 0px) and (max-width:1200px){
}
@media screen and (min-width: 0px) and (max-width:1042px){
}

@media screen and (min-width: 0px) and (max-width:992px){
    .product .pro-li .img{padding-top: 90%;}
    .case .swiper-slide-next .img{padding-top: 80%;}
    .case .swiper-slide a{padding: 0!important;}
    .about .a-r .info{font-size: 14px;line-height: 30px;}
    .about .a-tel .l p{font-size: 18px;}
    .about .a-tel .l h3{font-size: 28px;}
    .about .a-r a{margin-top: 3%;}
    .about .a-con{height: 440px;}
}
@media screen and (min-width: 0px) and (max-width:750px){
    .banner .hb{display: none;}
    .banner .mb{display: block;}
}
@media screen and (min-width: 0px) and (max-width:768px){
    .about .a-r .c-tit::before{bottom: 10%;}
    .about .a-r .c-tit{font-size: 22px;}
    .about .a-tel{width: 100%;}
    .about .a-r{padding: 0 calc(5% + 15px);}
    .about .a-r .info{padding-right: 0;}
    .about .a-r{margin-bottom: calc(60px + 5%);}
    .banner{margin-top: 65px;}
    .product .c-tit{margin: 5% 0;text-align: center;}
    .product .pro-li .info h3{font-size: 18px;}
    .product .pro-li .info p{line-height: 30px;}
    .product .pro-li .info{width: 60%;}
    .product .pro-li .info a{margin-top: 5%;}
    .product #proSwiper2 .swiper-slide .info2 .poa p{font-size: 18px;height: 50px;line-height: 50px;}
    .product #proSwiper2 .swiper-slide .info2{transform: translateY(calc(100% - 50px));}
    .news ul li a h4{font-size: 18px;}
}
@media screen and (min-width: 0px) and (max-width:550px){
    
}
@media screen and (min-width: 0px) and (max-width:460px){
    .about .a-tel{border-top-left-radius:0px}
    .about .a-con{height: 395px;}
}
@media screen and (min-width: 0px) and (max-width:440px){
    .product ul li a{height: 150px;}
    .product ul li a span{width: 28px;height: 28px;line-height: 28px;}
    .product .swiper-switch{display: none;}
}
@media screen and (min-width: 0px) and (max-width:375px){
    .about .a-tel .l h3{font-size: 22px;}
    .about .a-tel .l p{font-size: 16px;}
    .about .a-r .c-tit span{font-size: 12px;}
    .product ul li a{height: 130px;}
    .product .pro-li{padding-right: 20%;}
    .about .a-r .c-tit{font-size: 20px;}
}

@keyframes float2 {
    0%{
        transform: translate(0%,-50%);
    }
	50%{
		transform: translate(0%,-60%);
	}
    100%{
        transform: translate(0%,-50%);
    }
}
@keyframes float3 {
    0%{
        transform: translate(0%,0%);
    }
	50%{
		transform: translate(0%,20%);
	}
    100%{
        transform: translate(0%,0%);
    }
}